<template>
  <div class="search">
    <Header :textName="textName"></Header>
    <!-- <Header /> -->
    <div class="sesrchback">
      <div class="search">
        <span class="iconfont icon-fangdajing"></span>
        <input type="text" placeholder="鼠标" v-model="params.keyword"/>
        <span class="iconfont icon-shanchu" @click="changeInput"></span>
      </div>
      <div class="searchtext" @click="toSearchResult">搜索</div>
    </div>
    <div class="searchJuLu" v-show="!realList[0]">
      <div class="searchtext">搜索历史</div>
      <div class="searchHistory">
        <div class="historytext" v-for="(historyKeyword,index) in historyKeywordList" :key="'info-'+index" @click="searchResult(historyKeyword)">{{historyKeyword}}</div>
      </div>
    </div>
    <div class="searchRuLu" v-show="!realList[0]">
      <div class="searchtexthot">高频搜索</div>
      <div class="searchHot">
        <div class="hottext" v-for="(hotKeyword) in hotKeywordList" :key="hotKeyword.keyword" @click="searchResult(hotKeyword.keyword)">{{hotKeyword.keyword}}</div>
      </div>
    </div>
    <div class="searchDisplay" v-show="realList[0]">
      <span v-for="(real,index) in realList" :key="index" @click="searchResult(real)">{{real}}</span>
    </div>
  </div>
</template>

<script>
import Header from "@/components/Header";
import { GetSearchPopupData,GetSearchTipsListData } from "@/api";
import debounce from "lodash/debounce";
export default {
  name: "Search",
  data() {
    return {
      textName: "小米有品",
      params:{
        keyword:''
      },
      keywordData:{},
      realList:[]
    };
  },
  components: {
    Header,
  },
  computed:{
    historyKeywordList(){
      return this.keywordData.historyKeywordList || []
    },
     hotKeywordList(){
      return this.keywordData.hotKeywordList || []
    },
  },
  async mounted() {
    let result = await GetSearchPopupData();
    this.keywordData = result.data || {}
  },
  methods: {
    changeInput(){
      this.params.keyword = ''
    },
    async toSearchResult(){
      this.$store.dispatch('search/getGoodsList',this.params)
      this.$router.push({
        path:'/searchresult'
      })      
    },
    realTimeSearch: debounce(async function(){
       const { params } = this
        if(params.keyword){
             let result = await GetSearchTipsListData(params)
      this.realList = result.data
      if(params.keyword==''){
        this.realList = []
      }
        } 
     
    },800),
   
    searchResult(real){
      this.params.keyword = real
      this.toSearchResult()
    }
  },
  watch:{
    params:{
      deep:true,
      immediate:true,
      handler(){
        this.realTimeSearch()
      }
    }
  }
};
</script>

<style lang="less" scoped>
.search {
  width: 100%;
  height: 500px;
  .sesrchback {
    width: 100%;
    height: 140px;
    background-color: #9f8052;
    display: flex;
    padding-top: 138px;
    // padding-left: 20px;
    .search {
      box-sizing: border-box;
      width: 80%;
      height: 70px;
      background-color: white;
      border-radius: 36px;
      margin: auto 0;
      line-height: 64px;
      color: gray;
      margin-left: 20px;
      padding-left: 20px;
      input {
        background: none;
        outline: none;
        border: none;
        font-size: 40px;
      }
      :nth-child(1) {
        font-size: 60px;
      }
      :nth-child(3) {
        font-size: 76px;
        color: rgb(94, 94, 94);
        float: right;
        margin-right: 20px;
      }
    }
    .searchtext {
      width: 16%;
      height: 70px;
      // background-color: khaki;
      float: right;
      margin: auto 0px;
      text-align: center;
      line-height: 70px;
      font-size: 34px;
      color: white;
    }
  }
  .searchJuLu {
    width: 100%;
    // height: 300px;
    // background-color: rgb(194, 9, 9);
    padding: 0 20px;
    box-sizing: border-box;
    margin-top: 60px;
    .searchtext {
      font-size: 44px;
      font-weight: bolder;
    }
    .searchHistory {
      display: flex;
      margin-top: 40px;
      flex-wrap: wrap;
      .historytext {
        // width: 30%;
        // justify-content: flex-start;
        height: 80px;
        background-color: rgba(235, 235, 235, 0.774);
        padding: 0 30px;
        font-size: 38px;
        line-height: 80px;
        margin-right: 30px;
        border-radius: 50px;
        margin-bottom: 30px;
      }
    }
  }
  .searchRuLu {
    width: 100%;
    // height: 300px;
    // background-color: rgb(194, 9, 9);
    padding: 0 20px;
    box-sizing: border-box;
    margin-top: 60px;
    .searchtexthot {
      font-size: 44px;
      font-weight: bolder;
    }
    .searchHot {
      display: flex;
      margin-top: 40px;
      flex-wrap: wrap;
      .hottext {
        // width: 30%;
        // justify-content: flex-start;
        height: 80px;
        background-color: rgba(235, 235, 235, 0.774);
        padding: 0 30px;
        font-size: 38px;
        line-height: 80px;
        margin-right: 30px;
        border-radius: 50px;
        margin-bottom: 30px;
      }
    }
  }
  .searchDisplay{
    width: 100%;
    > span{
      font-size: 40px;
      display: block;
      width: 100%;
    height: 120px;
    // background-color: gray;
    line-height: 120px;
    padding-left: 20px;
    box-sizing: border-box;
    border-bottom: solid 0.5px rgb(218, 218, 218);
    }
  }
}
</style>
